Fonts and Colors

Slides: OpenOffice PowerPoint
Reading: HFHTML Ch. 9

Homework: due today. Before you add or change files on your web site, prepare a version of what you want your web site to look like on your thumb drive. Use an FTP client to synchronize your web site to the version on your thumb drive.

Tools

The CIE 1976 color chart .

To choose web colors (use 6 or 3 character HEX codes, preceded by a #, to specify colors other than: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow):

• color picker,
• color mixer, and
• sample colors.

To validate your CSS files: http://jigsaw.w3.org/css-validator.

Lab, part I

• Here is the code for chapter 9 from the text's web site.
• Download and unzip it into your My Documents directory.
• In the journal folder for Chapter 9, create a file journal.css with the following rule:

    body {
      font-family: Verdana, Geneva, Arial, sans-serif;
    } 

• Link your new file journal.css to journal.html and view the results in a browser.
• Make the body font small (using keywords) and the h1 heading 150% and h2 heading 120%. View your results in a browser to make sure the font sizes have changed.
• To make the headings stand out less, change the font-weight to normal.
• Also, add italic font to quotes (i.e. add a rule to your CSS file that says that all blockquotes should use italic).

Lab, part II

• Using the tools above, choose your favorite color. (If you don't have a favorite color, use Tony's -- a dark orange color.)
• Using Tony's journal page, journal.html and style sheet, journal.css,:
  • change the largest headings (h1 to be your favorite color,
  • change the next largest headings (h2) to be a lighter color of the same hue,
  • change the text in paragraphs to be a darker color of the same hue, and
  • add a dotted bottom border to the headings.
• Validate your journal.css file using the CSS validator: http://jigsaw.w3.org/css-validator
• (Optional) add the indicated icon to your "journal.html" web page.

Lab, part III

On your thumb drive:

• In your labs directory, create a subdirectory for today's lab.
• Transfer the journal directory to this new subdirectory.
• Create a hyperlink from your labs directory's index.html to the page you worked on today.
• If you haven't done so already:
  • In your about me directory, create a style sheet, about.css, for your website.
  • Link each of your about me pages to this style sheet.
• Modify your about.cssstyle sheet to:
  • set the background color using RGB values,
  • use borders around some element (e.g. around images, around paragraphs, for headings), and
  • use a different font than the default.

Lab, part IV

• Using an FTP client, synchronize your web site to the image on your thumbdrive.

Always shut down your computer and turn off your display before leaving the lab.